<template>
  <view class="content" ref="hight">
    <view class="vierror">
      <view class="zhezhang" @click="handon1">
        <view style="padding-top: 20%;">
        </view>
          <view id="vierror_word" @click.stop="handon(item)" v-for="item,index in arrword" :key="index">
            {{item.word}}
          </view>
            <view id="vierror_translate" v-show="boolean" >
              <view class="translate_up">
                发音：
              </view>
              <view class="translate_under">
                <view class="tex">
                   {{word.symbols}}
                </view>
              </view>
               <view class="translate_up">
                 词义：
               </view>
               <view class="translate_under">
                 <view class="tex">
                    {{word.meaning}}
                 </view>
               </view>
            </view>
      </view>
    </view>
  </view>
</template>

<script>
  import api from '../../utils/jiekou.js'
  const {getWrongWord} = api 
	export default {
		data() {
			return {
				boolean :false,
        arrword:[],
        word:{},
			}
		},
    onLoad() {
      this.getWrongWord_Get();
    },
		methods: {
			handon(e){
        this.boolean=true
        this.word=e;
        console.log(this.word.meaning)
			},
      
      handon1(){
        this.boolean=!this.boolean;
      },
      getWrongWord_Get(){
        getWrongWord().then((res)=>{
          this.arrword = res.rows;
          if(this.arrword.length<7){
            console.log(this.$refs.hight.$el.style.height=100+'vh')
          }
          // console.log(this.arrword.length)
        })
      }
		}
	}
</script>

<style>
   .zhezhang{
    width: 100%;
    height: 100%;
  } 
	.vierror{
		position: relative;
    width: 100%;
    height: 100%;
		background:url("../../static/vierrorback.jpg") repeat  center;
		background-size: 100% 100%;
	}
	#vierror_word{
		border-radius: 15px;
		width: 80%;
		height: 8vh;
		margin: 0% auto 10% auto ;
	 	background: rgba(229, 229, 229, 0.3);
		font-size: 1.5em;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
	}
	#vierror_translate{
		width: 80%;
    height: 30%;
		border-radius: 15px;
		background: rgba(218, 218, 218, 1);
    position: absolute;
    top: 30%;
    left: 10%;
    position:fixed;
    border: 1px solid rgba(232, 207, 221, 1);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
	}
	.translate_up{
		width: 85%;
		height: 13%;
		margin: auto;
		font-size: 1.6em;
		padding-top: 15px;
	}
	.translate_under{
		width: 85%;
		font-size: 1.3em;
		margin: auto;	
	}
  .tex{
    font-size: 1.5rem;
    font-weight: 600;
  }
</style>
